﻿@section header{
    <style>
        .select2-container {
            width: 100% !important;
        }

        .form .formValue select.form-control {
            height: auto;
        }

        .form .formValue .form-control {
            box-sizing: border-box;
        }

        .form .formTitle {
            width: 67px;
        }
    </style>
}
<form id="formEdit">
    <ul id="myTab" class="nav nav-tabs">
        <li class="active"><a href="#home" data-toggle="tab">基本信息</a></li>
        <li><a href="#ios" data-toggle="tab">执行人</a></li>
    </ul>
    <div id="myTabContent" class="tab-content">
        <div class="tab-pane fade in active" id="home">
            <table class="form">
                <tr>
                    <td class="formTitle">节点标识</td>
                    <td class="formValue">
                        <input id="NodeCode" type="text" class="form-control required" value="" disabled isvalid="yes" checkexpession="NotNull" />
                    </td>
                    <td class="formTitle">节点名称<font face="宋体">*</font></td>
                    <td class="formValue">
                        <input id="NodeName" type="text" class="form-control required" isvalid="yes" checkexpession="NotNull" />
                    </td>
                </tr>
                <tr>
                    <td class="formTitle">驳回类型<font face="宋体">*</font></td>
                    <td class="formValue">
                        <select id="NodeRejectType" name="NodeRejectType" class="form-control">
                            <option value="0">前一步</option>
                            <option value="1">第一步</option>
                            <option value="2">某一步</option>
                            <option value="3">用户指定</option>
                            <option value="4">不处理</option>
                        </select>
                    </td>
                    <td class="formTitle">驳回步骤</td>
                    <td class="formValue">
                        <select id="NodeRejectStep" name="NodeRejectStep" class="form-control">
                            <option value="0">开始</option>
                            <option value="1">结束</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td class="formTitle">选项</td>
                    <td class="formValue">
                        <div class="ckbox ckbox-color_a" style="display:none;"><input id="NodeIsOver" type="checkbox" /><label for="NodeIsOver">是否允许终止流程</label></div>
                        <div class="ckbox ckbox-color_a"><input id="setApp" type="checkbox" onclick="setTitleShow(this)" /><label for="setApp">由上级审批人指定</label></div>
                    </td>
                </tr>
                <tr id="confluencenode">
                    <td class="formTitle">会签策略<font face="宋体">*</font></td>
                    <td class="formValue">
                        <select id="NodeConfluenceType" name="NodeConfluenceType" class="form-control">
                            <option value="0">一个步骤通过即可</option>
                            <option value="1">所有步骤通过</option>
                            <option value="2">按百分比计算</option>
                        </select>
                    </td>
                    <td class="formTitle">会签比例</td>
                    <td class="formValue">
                        <input id="NodeConfluenceRate" type="text" class="form-control" value="100" />
                    </td>
                </tr>
                <tr>
                    <th class="formTitle">
                        备注
                    </th>
                    <td class="formValue" colspan="3">
                        <textarea id="Description" class="form-control" style="height: 80px;"></textarea>
                    </td>
                </tr>
            </table>
        </div>
        <div class="tab-pane fade" id="ios">
            <div class="container" style="margin: 10px;">
                <div class="row">
                    <label class="radio-inline">
                        <input type="radio" name="NodeDesignate" id="NodeDesignate1" value="ALL_USER" checked> 所有用户
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="NodeDesignate" id="NodeDesignate2" value="SPECIAL_USER"> 指定用户
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="NodeDesignate" id="NodeDesignate3" value="SPECIAL_ROLE"> 指定角色
                    </label>
                </div>
                <div class="row">
                    <div id="ALL_USER">
                        所有人都可以审核
                    </div>
                    <div id="SPECIAL_USER" style="display:none;">
                        <div id="deptree" class="ztree layui-nav-tree" style="width: 200px; height: 360px; float: left;"></div>
                        <ul id="userstree" class="ztree" style="margin-left: 220px; height: 360px;"></ul>
                    </div>
                    <div id="SPECIAL_ROLE" style="display:none;">
                        <div id="roles">
                            @await Component.InvokeAsync("Transfer")
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</form>
@section scripts{
    <script type="text/javascript">

        (function ($, clients) {
            "use strict";
            var users = [];
            var roles = [];
            //初始化控件
            function initControl() {
                userstree();
                $("#NodeCode").val((new Date()).getTime());
                //从flowschemes.js进入的节点信息
                var node = clients.FlowDesignObject;
                console.log(JSON.stringify(node));
                if (!!node) {
                    //初始化节点设置信息
                    if (node.setInfo != null) {
                        users = node.setInfo.NodeDesignateData.users;
                        roles = node.setInfo.NodeDesignateData.roles;
                    }
                    $('#NodeName').val(node.name);
                }
                //处理者
                $("input[name='NodeDesignate']").click(function () {
                    var id = $(this).val();
                    if (id == "ALL_USER") {
                        $("#ALL_USER").show();
                        $("#SPECIAL_USER").hide();
                        $("#SPECIAL_ROLE").hide();
                    } else if (id == "SPECIAL_USER") {
                        $("#ALL_USER").hide();
                        $("#SPECIAL_USER").show();
                        $("#SPECIAL_ROLE").hide();

                    } else if (id == "SPECIAL_ROLE") {
                        $("#ALL_USER").hide();
                        $("#SPECIAL_USER").hide();
                        $("#SPECIAL_ROLE").show();
                    }

                });
            }
            //用户列表，等lay table没问题了，可以换成table
            function userstree() {
                $("#deptree").treeview({
                    url: "/rbac/Organize/GetTreeJson",
                    method: "GET",
                    onnodeclick: function (treeNode) {
                        $.getJSON("/rbac/User/GetUsers?orgId=" + treeNode.id, function (result) {
                            $.each(result, function (i, field) {
                                //console.log(field);
                                $("#userstree").append("<li><input type='checkbox' class='userstree' title='" + field.name +"' value='" + field.id +"' /><span>" + field.name+"</span></li>");
                            });
                        });
                    }
                });
            }
            function getusers() {
                var users = [];
                var target = $('#userstree');
                var checkboxs = target.find('.userstree');
                for (var i = 0; i < checkboxs.length; i++) {
                    if ($(checkboxs[i]).prop('checked')) {
                        var that = $(checkboxs[i]).parent().clone();
                        var vl = that.children('input').val();
                        users.push(vl);
                    }
                }
                return users;
            }
            //提供给上父页面调用
            clients.getVal = function () {
                var result = {
                    NodeName: $('#NodeName').val(),
                    NodeDesignateData: { //节点指定操作人
                        users: getusers(),
                        roles: getroles(),
                        orgs: []
                    }
                };
                $.modalClose();
                return result;
            }

            $(function () {
                initControl();
            });

        })(jQuery, top.clients);
    </script>
}